<template>
  <Card>
    <p slot="title">去年同日警情环比</p>
    <div class="chart" id="chart-alarms-tot-lastyear"></div>
    <Divider />
    <span class="text">
      总量同比
      <span v-text="trendWord"></span>
      <span v-if="showPercentage">{{percentage}}%</span>
    </span>
    <Spin v-if="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
import axios from 'axios'
export default {
  name: "",
  data() {
    return {
      option: null,
      showPercentage:false,
      percentage: 0,
      loading: false,
      trendWord: "增长",
      todayCount:0,
      lastyearCount:0
    };
  },
  mounted() {
      this.renderChart();
  },
  methods: {
    renderChart() {
      this.loading = true;
      this.option = {
        tooltip: { show: true, trigger: "axis", formatter: "{a}:{b}\n{c}个" },
        grid: {
          top: 40,
          left: 20,
          right: 40,
          bottom: 20,
          containLabel: true
        },
        legend:{
          data:['今日出警情况','去年今日出警情况'],
          x:'left',
          y:'top',
          orient:'horizontal',
          textStyle:{
            color:'#333'
          }
        },
        yAxis: {
          type: "category",
          data: [],
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333320" } }
        },
        xAxis: {
          type: "value",
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333320" } }
        },
        series: [
          {
            name:'今日出警情况',  
            type: "bar",
            barWidth: "35%",
            data: [],
            itemStyle: {
              normal: {
                show: true,
                barBorderRadius: [0, 8, 8, 0],
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: this.COLORS[6]
                    },
                    { offset: 1, color: this.COLORS[7] }
                  ]
                }
              }
            },
            label: {
              show: true,
              position: "right",
              formatter(n) {
                return n.value + "次";
              }
            }
          },
          {
            name:'去年今日出警情况',  
            type: "bar",
            barWidth: "35%",
            data: [],
            itemStyle: {
              normal: {
                show: true,
                barBorderRadius: [0, 8, 8, 0],
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: this.COLORS[9]
                    },
                    { offset: 1, color: this.COLORS[8] }
                  ]
                }
              }
            },
            label: {
              show: true,
              position: "right",
              formatter(n) {
                return n.value + "次";
              }
            }
          }
        ]
      };
      var params = {
          lastyear:{
              startTime:this.dateShift(-365) + ' 00:00:00',
              endTime:this.dateShift(-365) + ' 23:59:59'
          },
          today:{
              startTime:this.dateShift(0) + ' 00:00:00',
              endTime:this.dateShift(0) + ' 23:59:59'
          }
      };
      var asyncThreads = 2;
      axios.get(this.URLHEAD_DVS + 'YZT_ZQXYFX',{
          params:params.lastyear
      }).then(res=>{
          let json = res.data;
          this.option.yAxis.data = json.Data.map(o=>{
              return o.AreaName
          })
          this.option.series[1].data = json.Data.map(o=>{
              return {
                  name:o.AreaName,
                  value:o.List.hzjy_list + o.List.hzjy_list + o.List.qtcd_list+o.List.qxpj_list+o.List.shjz_list
              }
          })
          json.Data.forEach((o,i)=>{
              this.lastyearCount = o.List.hzjy_list + o.List.qtcd_list+o.List.qxpj_list+o.List.shjz_list + this.count;
          })
          asyncThreads--;
          if(asyncThreads === 0){
              this.$Crender('chart-alarms-tot-lastyear',this.option)
              this.calcPercentage();
          }
      });
      axios.get(this.URLHEAD_DVS + 'YZT_ZQXYFX',{
          params:params.today
      }).then(res=>{ 
          let json = res.data;
          this.option.xAxis.data = json.Data.map(o=>{
              return o.AreaName
          })
          this.option.series[0].data = json.Data.map(o=>{
              return {
                  name:o.AreaName,
                  value:o.List.hzjy_list + o.List.qtcd_list+o.List.qxpj_list+o.List.shjz_list
              }
          })
          json.Data.forEach((o,i)=>{
              this.todayCount = o.List.hzjy_list + o.List.qtcd_list+o.List.qxpj_list+o.List.shjz_list + this.count;
          })
          asyncThreads--;
          if(asyncThreads === 0){
              this.$Crender('chart-alarms-tot-lastyear',this.option)
              this.calcPercentage();
          }
      });
    },
    calcPercentage(){
      this.loading=false
         var percentage = (this.todayCount - this.lastyearCount)/this.lastyearCount
        if(percentage < 0){
            this.trendWord = '下降'
            this.percentage = (percentage * -1).toFixed(2)
            this.showPercentage = true
        }else if(percentage > 0){
            this.trendWord = '上升'
            this.percentage = (percentage).toFixed(2)
            this.showPercentage = true
        }else{
            this.trendWord = '持平'
            this.percentage = 0;
            this.showPercentage = false
        }
    }
  }
};
</script>

<style scoped>
.chart{
  height:500px;
}
</style>